<script setup lang="ts">
import { useRequest } from 'vue-request'
import { fetchOrderDetailAPI } from '@/apis/fetchOrderDetail'
import { useUserInfoStore } from '@/store/userInfo'
import { OrderStatus, OrderType } from '@/types/enum'
import Swiper from '@/components/Swiper.vue'
import { arrivedAtDestinationAPI } from '@/apis/arrivedAtDestination'
import { useGeneralConfigStore } from '@/store/generalConfig'
import { passengerBoardedAPI } from '@/apis/passengerBoarded'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const id = ref('')
const { data, loading, refresh } = useRequest(
  () => fetchOrderDetailAPI({
    orderid: id.value,
  }, userInfoStore.userInfo!.token).then(res => res.data?.data),
  { manual: true },
)

onLoad((options) => {
  if (!options?.id)
    return
  id.value = options.id
  refresh()
})

const title = computed(() => {
  if (!data.value?.driver_status)
    return
  const titles = {
    [OrderStatus.已接单]: '您已接单',
    [OrderStatus.进行中]: '订单进行中',
    [OrderStatus.已完成]: '订单已完成',
    [OrderStatus.已取消]: '司机取消',
  }
  return titles[data.value?.driver_status]
})

const desc = computed(() => {
  if (!data.value?.driver_status)
    return
  const descs = {
    [OrderStatus.已接单]: '请尽快到达上车点...',
    [OrderStatus.进行中]: '请将乘客送到目的地',
    [OrderStatus.已完成]: '次订单已经结算至您的余额中，请注意查收哦',
    [OrderStatus.已取消]: data.value?.cannel_reason || '无',
  }
  return descs[data.value?.driver_status]
})

const orderTypeName = computed(() => {
  if (!data.value?.type)
    return ''
  const names: Record<OrderType, string> = {
    [OrderType.包车]: '快车',
    [OrderType.代叫]: '代叫',
    [OrderType.捎件]: '捎件',
  }
  return names[data.value.type]
})

const orderTypeColor = computed(() => {
  if (!data.value?.type)
    return ''
  const colors: Record<OrderType, string> = {
    [OrderType.包车]: '#3F8BF6',
    [OrderType.代叫]: '#00A85C',
    [OrderType.捎件]: '#C9A662',
  }
  return colors[data.value.type]
})

function handleCallPassenger() {
  uni.makePhoneCall({
    phoneNumber: data.value?.passengers_mobile || '',
  })
}

function handleCopy() {
  uni.setClipboardData({
    data: data.value?.order_number || '',
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
  })
}

function handleCallPronoun() {
  uni.makePhoneCall({
    phoneNumber: data.value?.pronoun_mobile || '',
  })
}

function handleCancelOrder() {
  router.push({
    name: 'cancelOrder',
  })
}

function handleContactPlatform() {
  uni.makePhoneCall({
    phoneNumber: generalConfigStore.generalConfig?.mobile || '',
  })
}

async function handlePassengerBoarded() {
  const res = await passengerBoardedAPI({
    order_status: '3',
    orderid: data.value!.id.toString(),
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1) {
    uni.showToast({ title: res.data?.msg, icon: 'none' })
    return
  }
  refresh()
}

/* -------------------------------- 进行中 START ------------------------------- */
const swiperState = ref<'normal' | 'loading' | 'success'>('normal')

async function handleSwipeDown() {
  swiperState.value = 'loading'
  const res = await arrivedAtDestinationAPI({
    order_status: '4',
    orderid: data.value!.id.toString(),
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1) {
    swiperState.value = 'normal'
    uni.showToast({ title: res.data?.msg, icon: 'none' })
    return
  }
  swiperState.value = 'success'
  refresh()
}
/* --------------------------------- 进行中 END -------------------------------- */
</script>

<template>
  <!-- 背景 -->
  <view class="absolute left-0 top-0 h-236rpx w-screen bg-#3F8BF6" />
  <!-- 内容 -->
  <view class="relative px-24rpx">
    <Spacer h="40" />
    <!-- 订单状态卡片 START -->
    <view class="rounded-10rpx bg-white p-40rpx">
      <view class="flex items-center">
        <view class="flex-1">
          <view class="text-44rpx text-#333333 font-medium leading-62rpx">
            {{ title }}
          </view>
          <Spacer h="8" />
          <view class="text-32rpx text-#333333 leading-45rpx">
            {{ desc }}
          </view>
        </view>
        <image
          class="ml-48rpx h-106rpx w-135rpx flex-none"
          src="@/static/images/order_icon.png"
        />
      </view>
      <Spacer h="40" />
      <Divider w="625" />
      <Spacer h="40" />
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <image
            class="h-80rpx w-80rpx"
            src="@/static/images/avatar_placeholder.png"
          />
          <Spacer w="12" />
          <view class="text-32rpx text-#333333 leading-45rpx">
            {{ data?.passengers_name || '未知' }}
          </view>
        </view>
        <RGButton
          size="small"
          corner="full"
          class="shadow-blue shadow-lg shadow-opacity-40"
          @tap="handleCallPassenger"
        >
          <view class="flex items-center">
            <image
              class="h-30rpx w-30rpx"
              src="@/static/images/phone_white.png"
            />
            <Spacer w="15" />
            联系乘客
          </view>
        </RGButton>
      </view>
    </view>
    <!-- 订单状态卡片 END -->
    <Spacer h="20" />
    <!-- 订单信息卡片 START -->
    <view class="rounded-10rpx bg-white p-40rpx">
      <view class="h-45rpx flex items-center justify-between overflow-visible">
        <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
          订单信息
        </view>
        <view
          class="rounded-full px-18rpx py-8rpx font-medium"
          :style="{
            border: `2rpx solid ${orderTypeColor}`,
            color: orderTypeColor,
          }"
        >
          {{ orderTypeName }}
        </view>
      </view>
      <Spacer h="40" />
      <Divider w="625" />
      <Spacer h="40" />
      <view>
        <view class="flex items-center">
          <view class="flex-none rounded-10rpx bg-#3F8BF6 p-6rpx text-24rpx text-white leading-24rpx">
            起
          </view>
          <Spacer w="24" class="flex-none" />
          <view class="text-36rpx text-#333333 font-bold leading-50rpx">
            {{ data?.start_place }}
          </view>
          <Spacer w="48rpx" class="flex-1" />
          <image
            class="h-50rpx w-50rpx flex-none"
            src="@/static/images/location_circle_blue.png"
          />
        </view>
        <view class="h-90rpx w-32rpx flex items-center justify-center">
          <view class="h-full w-0rpx border-r-1rpx border-r-gray-50 border-dashed" />
        </view>
        <view class="flex items-center">
          <view class="flex-shrink-0 rounded-10rpx bg-#FA662F p-6rpx text-24rpx text-white leading-24rpx">
            终
          </view>
          <Spacer w="24" class="flex-shrink-0" />
          <view class="flex-1 text-36rpx text-#333333 font-bold leading-50rpx">
            {{ data?.end_place }}
          </view>
          <Spacer w="48rpx" class="flex-1" />
          <image
            class="h-50rpx w-50rpx flex-none"
            src="@/static/images/location_circle_blue.png"
          />
        </view>
      </view>
      <Spacer h="40" />
      <Divider w="625" />
      <Spacer h="40" />
      <TableRow label="订单编号">
        <view class="flex items-center">
          <button
            class="border-1rpx border-#BDBDBD rounded-6rpx border-solid px-7rpx py-4rpx text-24rpx text-#707070 leading-32rpx"
            @tap="handleCopy"
          >
            复制
          </button>
          <Spacer w="16" />
          {{ data?.order_number || '未知' }}
        </view>
      </TableRow>
      <Spacer h="24" />
      <TableRow label="订单时间">
        {{ data?.create_time || '未知' }}
      </TableRow>
      <!-- <block v-if="orderType !== OrderType.城际合成">
        <Spacer h="24" />
        <TableRow label="联系人">
          李嘉欣 18900987778
        </TableRow>
      </block>
      <block v-if="orderType === OrderType.包车 || orderType === OrderType.代叫">
        <Spacer h="24" />
        <TableRow label="乘车人数">
          1
        </TableRow>
      </block>
      <block v-if="orderType === OrderType.城际合成">
        <Spacer h="24" />
        <TableRow label="乘车人">
          <view class="flex flex-col">
            <view class="flex items-center">
              <view class="text">
                李嘉欣 1891231231
              </view>
              <Spacer w="20" />
              <image
                class="h-50rpx w-50rpx"
                src="@/static/images/phone_circle_blue.png"
              />
            </view>
          </view>
        </TableRow>
      </block> -->
      <Spacer h="24" />
      <TableRow label="出发时间">
        {{ data?.start_time || '未知' }}
      </TableRow>
      <block v-if="data?.type === OrderType.代叫">
        <Spacer h="24" />
        <TableRow label="备注信息">
          {{ data.remark || '无备注' }}
        </TableRow>
        <Spacer h="24" />
        <TableRow label="代叫人">
          {{ `${data.pronoun_name} ${data.pronoun_mobile}` }}
        </TableRow>
      </block>
      <block v-if="data?.type === OrderType.捎件">
        <Spacer h="24" />
        <TableRow label="发件人">
          {{ `${data.pronoun_name} ${data.pronoun_mobile}` }}
        </TableRow>
        <Spacer h="24" />
        <TableRow label="物品类型">
          {{ `${data.goods_type} || '无'` }}
        </TableRow>
        <Spacer h="24" />
        <TableRow label="备注信息">
          {{ data.remark || '无备注' }}
        </TableRow>
        <Spacer h="24" />
        <TableRow label="图片" direction="column">
          <PictureGrid
            mode="display"
            :pictures="data.image.split(',') || []"
            :cols="4"
            :width="625"
          />
        </TableRow>
      </block>
      <Spacer h="24" />
      <TableRow label="接单时间">
        {{ data?.recrive_time || '未知' }}
      </TableRow>
      <block v-if="data?.driver_status === OrderStatus.进行中 || data?.driver_status === OrderStatus.已完成">
        <Spacer h="24" />
        <TableRow label="到达时间">
          {{ data.arrived_time || '未知' }}
        </TableRow>
      </block>
      <block v-if="data?.driver_status === OrderStatus.已完成">
        <Spacer h="24" />
        <TableRow label="完成时间">
          {{ data.finish_time || '未知' }}
        </TableRow>
      </block>
      <block v-if="data?.driver_status === OrderStatus.已取消">
        <Spacer h="24" />
        <TableRow label="取消时间">
          {{ data.order_cannel_time || '未知' }}
        </TableRow>
      </block>
    </view>
    <!-- 订单信息卡片 END -->
    <button
      v-if="data?.driver_status === OrderStatus.进行中 && data?.type === OrderType.代叫"
      class="h-100rpx w-full flex items-center justify-center rounded-b-10rpx from-#549FF7 to-#3F8BF6 bg-gradient-to-r"
      @tap="handleCallPronoun"
    >
      <image
        class="h-34rpx w-34rpx"
        src="@/static/images/phone_white.png"
      />
      <Spacer w="16" />
      <view class="text-32rpx text-#FFFFFF leading-45rpx">
        联系代叫人
      </view>
    </button>
    <Spacer h="24" />
    <!-- 结算信息卡片 START -->
    <view class="rounded-10rpx bg-white p-40rpx">
      <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
        结算信息
      </view>
      <Spacer h="40" />
      <Divider />
      <Spacer h="40" />
      <TableRow label="结算方式">
        余额
      </TableRow>
      <Spacer h="24" />
      <TableRow label="结算金额">
        {{ data?.pay_money }}元
      </TableRow>
    </view>
    <!-- 结算信息卡片 END -->
    <block v-if="data?.driver_status === OrderStatus.进行中">
      <Spacer h="24" />
      <view class="w-full flex items-center justify-between">
        <RGButton type="secondary" width="272" @tap="handleCancelOrder">
          取消订单
        </RGButton>
        <RGButton width="410" @tap="handleContactPlatform">
          联系平台
        </RGButton>
      </view>
    </block>
    <Spacer h="240" />
  </view>

  <view v-if="data?.driver_status === OrderStatus.已接单" class="fixed bottom-0 w-full flex items-center justify-between bg-white px-24rpx py-20rpx x-center">
    <RGButton type="secondary" width="272" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <RGButton width="410" @tap="handlePassengerBoarded">
      乘客已上车
    </RGButton>
  </view>
  <view v-if="data?.driver_status === OrderStatus.进行中" class="fixed bottom-0 w-full flex items-center justify-between bg-white x-center">
    <Swiper :state="swiperState" tip-text="向右滑动到达目的地" @done="handleSwipeDown" />
  </view>
  <view v-if="data?.driver_status === OrderStatus.已完成" class="fixed bottom-0 w-full flex items-center justify-center bg-white px-24rpx py-20rpx x-center">
    <RGButton type="outline" width="702" @tap="handleContactPlatform">
      联系平台
    </RGButton>
  </view>

  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'orderDetail'
style:
  navigationBarTitleText: '订单详情'
</route>
